<template>
	<qh-page-view bgColor="#151619" title="会员卡" color="#FFFFFF">
		<view class="bindcardbtn" :style="buttonStyle">
			<login-and-register v-if="vip" type="2" ref="bindRef" @success="getDefaultCard" :buttonStyle="wrapCardStyle" text="更换会员卡"></login-and-register>
			<login-and-register v-else type="3" ref="registerRef" @success="registerSuccess">
				<view class="mybtn">注册会员</view>
			</login-and-register>
		</view>
		<block v-if="vip">
			<view class="vip-card">
				<image class="vip_bg" :src="image_header +'vipcard-background.png'">
				</image>
				<image v-if="vip.plus_type == 2" class="plus-member" src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1729070595670f860300888.png"></image>
				<view class="card-con" :style="vip.plus_type == 2? 'padding: 90rpx 60rpx 0;' : 'padding: 60rpx 60rpx 0;'">
					<view class="vip-information">
						<view class="information-left">
							<image class="vip-image" :src="vip.avatar"></image>
						</view>
						<view style="width: 84%;">
							<view class="vip-name-content">
								<view class="name-num">
									<view class="vip_name">{{vip.nickname}}</view>
									<view class="vip_card_num">{{vip.card_num}}</view>
								</view>
								<text class="qh-rt-single qh-rt-a-zu4460 vip-code-icon" @tap.stop="showcardCode"></text>
							</view>
							<progress v-if="vip.plus_type == 3" class="member-growth" activeColor="#B6883B" :percent="gradePercent" active stroke-width="3"
								backgroundColor="#fff" />
							<view class="vip-level" v-if="vip.plus_type == 3">
								<view>
									当前等级{{vip.grade_name}}
								</view>
								<view>
									{{vip.grade_integral}}/{{vip.next_grade_integral}}
								</view>
							</view>
							<view class="vip-end-time" v-if="vip.plus_type == 2">
								{{vip.plus_day+'到期'}}
								<text class="renew" @tap='toPlusHome'>
									续费>
								</text>
							</view>
							<view class="vip-desc">
								<view></view>
								<view></view>
							</view>
						</view>
					</view>
					<view class="vip-money">
						<view class="vip-integral">
							<view class="money-num">{{vip.balance}}</view>
							<view class="vip-font-color">余额(元)</view>
						</view>
						<view class="vip_balance">
							<view class="money-num">{{vip.integral}}</view>
							<view class="vip-font-color">{{integral_name}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lists">
				<view class="lists-title">常用功能</view>
				<view class="lists-con">
					<view class="lists-lists">
						<view class="lists-list" @tap="showBalanceOrder">
							<view class="list-img">
								<image :src="image_header+'balance-record.png'"></image>
							</view>
							<view class="list-txt">余额记录</view>
						</view>
						<view class="lists-list" @tap="showIntegralOrder">
							<view class="list-img">
								<image :src="image_header+'integral-record.png'">
								</image>
							</view>
							<view class="list-txt">{{integral_name}}记录</view>
						</view>
						<view class="lists-list" @tap="showVipCoupon">
							<view class="list-img">
								<image :src="image_header+'card-ticket.png'"></image>
							</view>
							<view class="list-txt">会员卡优惠券</view>
						</view>
					</view>
					<view class="lists-lists">
						<view class="lists-list" @tap="toVipDetail">
							<view class="list-img">
								<image :src="image_header+'vip-edit.png'"></image>
							</view>
							<view class="list-txt">会员资料</view>
						</view>
						<view class="lists-list" @tap="toVipPassword">
							<view class="list-img">
								<image :src="image_header+'pay-password.png'"></image>
							</view>
							<view class="list-txt">支付密码</view>
						</view>
						<view class="lists-list" @tap="buyPlusRecord" v-if="Number(vip.plus_id)">
							<view class="list-img">
								<image src="/static/images/buy-plus-record.png"></image>
							</view>
							<view class="list-txt">PLUS购买记录</view>
						</view>
					</view>
				</view>

			</view>
		</block>

		<view class="kong" v-if="empty">暂未绑定会员卡</view>

		<view class="vipcardalert" v-if="showBarCode" @tap="rotateIndex">
			<view class="vipcardalertinner">
				<view class="code-title">动态码</view>
				<view class="barcode">
					<view class="canvas_box" @tap.stop="refreshCode">
						<!-- 此方法在支付宝小程序中无法生成条形码改用第三方插件uni_modules中wmf-code<canvas canvas-id="barcode"></canvas> -->
						<w-barcode :options="barCodeoptions"></w-barcode>
					</view>
					<view class="barcode-box">
						<view class="barnum">{{tempDynamicCode}}</view>
						<view class="barcode-refresh" @tap.stop="refreshCode">刷新</view>
					</view>
				</view>
			</view>
		</view>

	</qh-page-view>
</template>

<script>
	// pages/card/card.js
	var App = getApp().globalData;
	var wxbarcode = require("@/utils/index.js");
	import templatePassword from '@/components/template-password.vue';
	export default {
		components: {
			templatePassword,
		},
		data() {
			return {
				vip: '',
				showBarCode: false,
				animationData: {},
				empty: 0,
				card_num: '',
				isRefresh: false,
				//是否刷新动态码 
				dynamicCode: '',
				//动态码
				tempDynamicCode: '', //显示的动态码   
				password: "",
				image_header: "",
				barCodeoptions: {
					width: 500,
					height: 220,
					code: ''
				},
				wrapCardStyle: {
					'width': '690rpx',
					'box-sizing': 'border-box',
					'text-align': 'center',
					'border-radius': '50rpx',
					'background': 'linear-gradient(to right, #F0D29D, #E4B569)',
					'color': '#fff',
					'height': '90rpx',
					'font-size': '30rpx',
					'line-height': '90rpx',
				},
				integral_name:''
			};
		},
		computed: {
			buttonStyle() {
				return `height:${this.$store.bottomHeight + 110}rpx`;
			},
			gradePercent() {
				let data = this.vip ? (this.vip.grade_integral * 100 / this.vip.next_grade_integral) : 0;
				return data > 100 ? 100 : data;
			},
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		async onLoad(options) {
			// #ifdef MP-ALIPAY
			
			if (JSON.stringify(options) == '{}') {
				options = my.getLaunchOptionsSync().query;
			}
			// #endif
			console.log(options, 'options')
			await this.$onLaunched;
			this.image_header = this.$store.image_header;

			if (options && (options.store_id)) {
				this.$store.store_id = options.store_id;
			}
			await this.getDefaultCard()
			if (options && options.type == 1) {
				this.showBarCode = true
			}
		},
	

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {
			clearInterval(this.dynamicCodeTimer);
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {
			clearInterval(this.dynamicCodeTimer);
		},

		onShareAppMessage(res) {
			return {
				title: '会员卡',
				path: '/pages/mine/card/card?store_id' + this.$store.store_id + '&share_uid=' + App.XcxData.userInfo.uid,
				success: (res) => { // 转发成功
				},
				fail: (res) => { // 转发失败
				}
			};
		},
		methods: {
			//注册成功
			registerSuccess(type) {
				this.getDefaultCard(type == 'register' ? true : false);
			},
			toPlusHome() {
				uni.navigateTo({
					url: '../plusHome/plusHome'
				})
			},
			getDefaultCard(bool = false) {
				this.integral_name = this.$store.integral_name;
				clearInterval(this.dynamicCodeTimer);
				getApp().globalData.sendRequest({
					url: '/Vip/defaultCard',
					type: "post",
					data: {},
					showLoading: false,
					success: async (res) => {
						// console.log(res);
						if (res.status == 1) {
							this.vip = res.data
							var user = uni.getStorageSync('userInfo');
							user.vid = res.data.vip_id;
							uni.setStorageSync('userInfo', user);
							getApp().globalData.XcxData.userInfo.vid = res.data.vip_id;
							getApp().globalData.XcxData.user_type = res.data.plus_type;
							uni.setStorageSync('isVip', 1);
							this.showBarCode && await this.getDynamicCode();
							if (bool === true) {
								uni.navigateTo({
									url: `../setPassword/setPassword?vipId=${res.data.vip_id}`
								})
							}
							this.empty = false;
						} else {
							this.setData({
								empty: 1
							});
							uni.setStorageSync('isVip', 0);
						}
					}
				});
			},

			toVipDetail() {
				uni.navigateTo({
					url: '/pages/mine/vipInfo/vipInfo'
				});
			},
			toVipPassword() {
				uni.navigateTo({
					url: '/pages/order/vipPassword/vipPassword'
				});
			},
			//plus购买记录
			buyPlusRecord() {
				let vip_id = this.vip.vip_id
				uni.navigateTo({
					url: '../plusRecord/plusRecord?vip_id=' + vip_id
				})
			},

			onAuthError(e) {
				console.log('onAuthError:', e)
			},

			// 余额记录
			showBalanceOrder() {
				uni.navigateTo({
					url: '../balanceOrder/balanceOrder'
				});
			},
			// 积分记录
			showIntegralOrder() {
				uni.navigateTo({
					url: '../integralOrder/integralOrder'
				});
			},
			// 会员卡优惠券
			showVipCoupon() {
				uni.navigateTo({
					url: '/pages/mine/mycoupon/mycoupon?nav=5'
				});
			},
			//展示会员卡号
			showcardCode() {
				this.refreshCode()
				this.setData({
					showBarCode: true
				});
			},
			// 关闭条码
			rotateIndex() {
				this.setData({
					showBarCode: false
				});
			},
			getDynamicCode(bol) {
				var showLoading = bol ? true : false;
				getApp().globalData.sendRequest({
					url: '/Vip/getDynamicCode',
					showLoading: showLoading,
					loadTitle: '刷新中...',
					data: {
						isRefresh: this.isRefresh ? 1 : 0
					},
					success: (res) => {
						if (res.status == 1) {
							var tempDynamicCode = res.code.substr(0, 4);
							tempDynamicCode += ' ' + res.code.substr(4, 4);
							tempDynamicCode += ' ' + res.code.substr(8, 4);
							tempDynamicCode += ' ' + res.code.substr(12, 4);
							tempDynamicCode += ' ' + res.code.substr(16, 2);
							this.setData({
								isRefresh: false,
								dynamicCode: res.code,
								tempDynamicCode: tempDynamicCode
							});
							console.log(res.code, 'rescode')
							console.log(tempDynamicCode, 'tempDynamicCode')
							this.barCodeoptions.code = res.code
							// wxbarcode.barcode('barcode', res.code, 500, 200);
							this.dynamicCodeTimeout();
						}
					}
				});
			},

			/**
			 * 刷新动态码
			 */
			refreshCode() {
				this.setData({
					isRefresh: true
				});
				clearInterval(this.dynamicCodeTimer);
				this.getDynamicCode(true);
			},

			/**
			 * 获取动态码
			 */
			dynamicCodeTimeout() {
				// console.log(time)
				let time = 60;
				this.dynamicCodeTimer = setInterval(() => {
					time--;

					if (time <= 0) {
						clearInterval(this.dynamicCodeTimer);
						this.getDynamicCode();
					}
				}, 1000);
			}
		}
	};
</script>
<style>
	@import "./card.css";
</style>
